import React, { Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { router } from 'umi';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
    Card,
    Row,
    Col,
    Select,
    Button,
    message,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

const { Option } = Select;

const titleStyle: any = {
    lineHight: '60px',
    fontSize: 26,
    textAlign: 'center',
};

interface SearchProps extends FormComponentProps {
    dispatch: Dispatch<any>;
    dataInfo: any;
    INITINFO: any;
    logisList: any[];
    loading: boolean;
}

interface SearchState {
    logisId: number;
    expressId: string;
}

@connect(({
    ocrCheckLogis: { logisList, dataInfo, hasCheck },
    common: { INITINFO, },
}: any) => ({
    INITINFO,
    logisList,
    dataInfo,
    hasCheck,
}))

class SearchElemInfo extends React.Component<SearchProps, SearchState> {
    timer: any = null;

    state: SearchState = {
        logisId: 0,
        expressId: '0',
    };

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({ type: 'ocrCheckLogis/checkUserPerm' });

        this.fetchExpressList();
    }

    handleSearchLogis = (name: string) => {
        clearTimeout(this.timer);

        const { dispatch } = this.props;
        this.timer = setTimeout(() => {
            dispatch({
                type: 'ocrCheckLogis/fetchLogisList',
                payload: { name },
            });
        }, 500);
    };

    handleChangeLogis = (logisId: number) => {
        const { dispatch } = this.props, { expressId } = this.state;
        this.setState({ logisId }, () => {
            dispatch({
                type: 'ocrCheckLogis/selectLogis',
                payload: { logisId, expressId, },
            });
        });
    };

    handleChangeExpress = (expressId: string) => {
        const { dispatch } = this.props, { logisId } = this.state;
        this.setState({ logisId, expressId }, () => {
            dispatch({
                type: 'ocrCheckLogis/selectLogis',
                payload: { logisId, expressId, },
            });
        });
    };

    handleStartCheck = () => {
        const { logisId, expressId } = this.state;
        const { dataInfo: { uncheckCount = 0 } } = this.props;

        if (!logisId) {
            message.error('请选择物流中心');
        } else if (!expressId) {
            message.error('请选择快递公司');
        } else if (uncheckCount <= 0) {
            message.error('无待校验订单，禁止批量校验！');
        } else {
            router.push({
                pathname: '/logisCenter/ocrCheck/logis/check',
                query: { logisId, expressId },
            });
        }
    };

    // 获取快递公司列表
    fetchExpressList = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'common/fetchExpressList2',
        });
    };

    render() {
        const { form: { getFieldDecorator }, logisList = [], dataInfo, INITINFO: { expressList } } = this.props;

        return (
            <Fragment>
                <PageHeader />
                <Card
                    bordered={false}
                    style={{ height: 'calc(100vh - 74px)', paddingTop: '10%' }}
                >
                    <h4 style={titleStyle}>OCR校验</h4>
                    <Form className="tableListForm">
                        <Row
                            gutter={{ md: 8, xl: 24, lg: 48 }}
                            justify="center"
                            className="marginT20"
                        >
                            <Col md={8} sm={24}>
                                <Form.Item label="　物流中心">
                                    {getFieldDecorator('logisId')(
                                        <Select
                                            showSearch
                                            allowClear
                                            placeholder="请选择"
                                            notFoundContent={null}
                                            onSearch={this.handleSearchLogis}
                                            onChange={this.handleChangeLogis}
                                            filterOption={(input: any, option: any) => option.props.children
                                                .toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        >
                                            {logisList.map((item: any) => (
                                                <Option value={item.id} key={item.id}>
                                                    {item.name}
                                                </Option>
                                            ))}
                                        </Select>,
                                    )}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row
                            gutter={{ md: 8, xl: 24, lg: 48 }}
                            justify="center"
                            className="marginT20"
                        >
                            <Col md={8} sm={24}>
                                <Form.Item label="　快递公司">
                                    {getFieldDecorator('expressId', {
                                        initialValue: '0',
                                    })(
                                        <Select
                                            showSearch
                                            allowClear
                                            placeholder="请选择"
                                            onChange={this.handleChangeExpress}
                                            filterOption={(input: any, option: any) => option.props.children
                                                .toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        >
                                            <Option
                                                value={'0'}
                                                key={'0'}
                                                style={{
                                                    backgroundSize: '18px,18px',
                                                    backgroundRepeat: 'no-repeat',
                                                    backgroundPosition: '8px center',
                                                    padding: '0 33px ',
                                                    lineHeight: '32px',
                                                }}
                                            >
                                                全部
                                            </Option>
                                            {expressList.map((express: any) => (
                                                <Option
                                                    value={String(express.id)}
                                                    key={express.id}
                                                    style={{
                                                        backgroundImage: `url(${express.img})`,
                                                        backgroundSize: '18px,18px',
                                                        backgroundRepeat: 'no-repeat',
                                                        backgroundPosition: '8px center',
                                                        padding: '0 33px ',
                                                        lineHeight: '32px',
                                                    }}
                                                >
                                                    {express.name}
                                                </Option>
                                            ))}
                                        </Select>,
                                    )}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={{ md: 8, xl: 24, lg: 48 }} justify="center">
                            <Col md={8} sm={24}>
                                <Form.Item label="　　待校验">
                                    <div>{dataInfo.uncheckCount}</div>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={{ md: 8, xl: 24, lg: 48 }} justify="center">
                            <Col md={8} sm={24}>
                                <Form.Item label="今日已完成">
                                    <div>{dataInfo.checkedCount}</div>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={{ md: 8, xl: 24, lg: 48 }} justify="center">
                            <Col md={8} sm={24} style={{ textAlign: 'center' }}>
                                <Button type="primary" onClick={this.handleStartCheck}>
                                    开始批量校验
                                </Button>
                            </Col>
                        </Row>
                    </Form>
                </Card>
            </Fragment>
        );
    }
}

export default Form.create<SearchProps>()(SearchElemInfo);
